<template>
<div class="equipment-inquiry">
    <!-- 采购信息部分 -->
    <div class="info-section">
        <div class="title">{{sjinfo.title}}</div>
        <div class="time">发布时间：{{formatDate(sjinfo.fbsj)}}</div>
        <van-divider style="margin-top:10px;margin-bottom:10px;"/>
        <div class="buyer">
            <span style="color:#A399A3;font-size:15px;">采购人：</span>
            <span style="color:black;font-size:15px;">{{sjinfo.cgrname}} {{ '(' + sjinfo.provincename + ' / ' + sjinfo.cityname + ' / ' + sjinfo.areaname + ')'}}</span>
        </div>
        <div class="buyer">
            <span style="color:#A399A3;font-size:15px;">联系方式：</span>
            <span style="color:#FC0B00;font-size:15px;">{{cgrphone}}</span>
        </div>
        <div class="buyer">
            <span style="color:#A399A3;font-size:15px;">商机价格：</span>
            <span style="color:#FC0B00;font-size:15px;">{{ sjinfo.price }}元 / 条</span>
        </div>
        <div style="display: flex; align-items: center;width:100%;margin-top:20px;">
            <van-progress :percentage=" sjinfo.jdsl / sjinfo.zdsl * 100" color="#14C262" :stroke-width="14" :show-pivot="false" style="width: 90%;"/>
            <span style="margin-left: 10px;width:10%;text-align:center;">{{ sjinfo.jdsl }} / {{sjinfo.zdsl}}</span>
        </div>
        <van-divider style="margin-top:15px;margin-bottom:5px;"/>
        <div class="description">
            {{ sjinfo.content ? sjinfo.content:'' }}
        </div>
        <van-divider style="margin-top:5px;margin-bottom:5px;"/>

        <van-field
            type="textarea"
            v-model="ssnr"
            autosize
            placeholder="请输入申诉原因"
            label="申请原因："
            border-radius="8px"
            style="margin-left:1%;margin-right:1%;width:98%;height:150px;border:1px solid #14C262;"
        />
        <van-divider style="margin-top:5px;margin-bottom:5px;"/>
        <van-button type="primary" @click="appeal(sjinfo)" style="margin-left: 1%;margin-right:1%;width:98%;" >提交</van-button>
    </div>
    </div>
</template>

<script>
import { addOrderappeal, getHyinfo, querySjinfo } from '../../api/api'
import { floatMul, floatSub } from '../../utils/NumberUtil'
export default {
    data() {
        return {
            showConfirmDialog: false,
            orderRecords: [],
            orderList: [],
            newInquiries: [],
            sjid: undefined,
            sjinfo: {},
            rechargeAmount: 200,
            confirmLoading: false,
            price: 0,
            pageNum: 1,
            pageSize: 10,
            hyid: undefined,
            orderinfoList: [],
            inquiryList: [],
            jzgdshow: true,
            hyid:undefined,
            cgrphone:'',
            orderid:undefined,
            ssnr:'',
            hyinfo:{}
        }
    },
    created() {
        this.sjid = this.$route.query.sjid
        this.hyid = this.$route.query.hyid
        this.cgrphone = this.$route.query.cgrphone
        this.orderid = this.$route.query.orderid
        this.querySjinfoBySjid()
        this.getHyinfo()
    },
    mounted() {

    },
    methods: {
        getHyinfo() {
            const param = { hyid: this.hyid }
            getHyinfo(param).then(res => {
                if (res.code == 200) {
                    this.hyinfo = res.data
                }
            })
        },
        appeal(sjinfo){
            console.log(this.hyinfo)
            if(!this.hyinfo.phone){
                this.$toast('请先到【完善信息】功能绑定手机号')
                return
            }
            sjinfo.hyid = this.hyid
            sjinfo.orderid = this.orderid
            sjinfo.cgrphone = this.cgrphone
            sjinfo.ssnr = this.ssnr
            addOrderappeal(sjinfo).then(res => {
                if (res.code == 200) {
                    this.$toast('提交成功')
                    this.$router.push({ path: '/orderappeallist', query: { hyid: this.hyid }})
                }
            })
        },
        gotoYhxy() {
            
        },
        confirmLoading() {
            return this.confirmLoading
        },
        handleJd(sjinfo) { // 添加了空格
            this.price = sjinfo.price
            this.showConfirmDialog = true
        },
        handleMd(sjinfo) { // 添加了空格
            // 这里可以根据需要使用 sjinfo 变量，例如打印日志
            this.price = floatMul(sjinfo.price, floatSub(sjinfo.zdsl, sjinfo.jdsl))
            this.showConfirmDialog = true
        },
        padZero(num) {
            return num.toString().padStart(2, '0')
        },
        formatName(name) {
            if (name.length > 1) {
            return name.substring(0, 1) + '**'
            } else {
            return name
            }
        },
        formatDate(dateStr) {
            const date = new Date(dateStr)
            const now = new Date()
            // 判断是否为今天
            if (date.getDate() === now.getDate() &&
            date.getMonth() === now.getMonth() &&
            date.getFullYear() === now.getFullYear()) {
            // 今天显示时分
            return `今天 ${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}`
            }
            // 非今天显示完整日期
            return `${date.getFullYear()}-${this.padZero(date.getMonth() + 1)}-${this.padZero(date.getDate())} 
                    ${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}`
        },
        querySjinfoBySjid() {
            const param = {
            sjid: this.sjid
            }
            querySjinfo(param).then(res => {
            if (res.code == 200) {
                this.sjinfo = res.data
                const fbsj = res.data.fbsj
            }
            })
        },
        gotoRechHyinfo() {
            this.$router.push({ path: '/rechargehy', query: { hyid: this.hyid, zhye: this.zhye }})
        }
        }
    }
    </script>
    
    <style scoped>
    
    .order-page {
        padding: 5px;
        text-align: center;
    }
    .info-section {
        margin-bottom: 20px;
        border-bottom: #e4e7ed 1px solid;
        padding-bottom: 10px;;
        font-size: 15px;
    }
    
    .recharge-section {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        width:100%;
        font-size:15px;
    }
    .order-button-section {
        margin-bottom: 20px;
    }
    .tip-section {
        color: #999;
        margin-bottom: 10px;
        font-size: 15px;
    }
    .agreement-section {
        color: #999;
        font-size: 15px;
    }
    .equipment-inquiry {
        background-color: #ffffff;
        padding:10px;
    }
    .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .time{
        color: #b1b1b1;
        font-size:12px;
    }
    .buyer{
        margin-bottom: 10px;
    }
    .contact {
        margin-bottom: 5px;
    }
    .progress-text {
        float: right;
    }
    .limit-text {
        color: #999;
        margin-top: 5px;
        font-size: 13px;
    }
    
    .rownr {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        flex-direction: row;
        align-items: center;
    }
    .reached-limit {
        background-color: #e6f7ff;
        color: #1989fa;
        text-align: center;
        padding: 8px;
        border-radius: 4px;
        margin-top: 10px;
    }
    .description {
        padding: 5px;
        margin-top: 5px;
        line-height: 1.5;
        font-size: 14px;
    }
    .button-group {
        display: flex;
        justify-content: space-around;
        margin: 20px 0;
    }
    .vip-tip {
        background-color: #ff4949;
        color: white;
        text-align: center;
        padding: 10px;
        border-radius: 4px;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;;
    }
    .sub-title {
        font-size: 16px;
        font-weight: bold;
        margin-top: 20px;
        margin-bottom: 10px;
        color: #FC3600;
        border-bottom: 1px solid #FC3600;
        padding-bottom: 5px;
    }
    .inquiry-item {
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 10px;
    }
    .inquiry-title {
        font-size: 16px;
        margin-bottom: 5px;
        width: 80%;
        overflow: hidden;
    }
    .inquiry-meta {
        color: #999;
    }
    
    table {
        border-collapse: collapse;
        width: 100%;
    }
    
    table,
    th,
    td {
        border: 1px solid #ccc;
        text-align: center;
    }
    
    th,
    td {
        padding: 8px;
        text-align: center;
    }
    
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    </style>
    